<template>
	<view class="u-p-20">
		<view class="bgw box-radius u-p-l-28 u-p-r-28 u-m-b-20" v-for="(v,i) in detail.productList">
			<item :detail="v" type="order">
				<template v-slot:right>
					<view class="">
						x{{v.count}}
					</view>
				</template>
			</item>
			<view class="u-flex u-p-t-20 u-p-b-20">
				<view class="u-m-r-20">
					商品评分
				</view>
				<u-rate :count="5" v-model="formEvaluate[i].starLevel" active-icon="star-fill" inactive-icon="star-fill"
					active-color="#FFB41A" inactive-color="#E8E8EA" :disabled="!isEdit"></u-rate>
			</view>
			<view class="u-p-t-28 u-p-b-28 u-border-bottom" v-if="isEdit">
				<u-input v-model.trim="formEvaluate[i].content" placeholder="请输入您的评价" type="textarea" input-align="left" />
				<view class="u-text-right u-font-24 u-tips-color">
					{{formEvaluate[i].content.length || 0}}/200
				</view>
			</view>
			<view class="u-p-t-28 u-p-b-28 u-border-bottom" v-if="!isEdit && formEvaluate[i].content">
				{{formEvaluate[i].content}}
			</view>
			<view class="u-p-t-28 u-p-b-28" v-if="isEdit">
				<view class="u-flex">
					<view class="u-flex-1">
						<text class="u-font-28">上传图片({{formEvaluate[i].images.length||0}}/9)</text>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view style="margin: 0 -11rpx;">
					<g-upload-img v-model="formEvaluate[i].images"></g-upload-img>
				</view>
			</view>
			<view class="u-p-t-28 u-p-b-28" v-if="!isEdit && formEvaluate[i].images.length>0">
				<u-gap height="20"></u-gap>
				<view style="margin: 0 -11rpx;">
					<g-upload-img v-model="formEvaluate[i].images" :deletable="false" :maxCount="formEvaluate[i].images.length"></g-upload-img>
				</view>
			</view>
		</view>
	</view>
	<u-gap height="120"></u-gap>
	<view class="fixed-bottom u-p-l-48 u-p-r-48 u-p-t-20 u-p-b-20 bgw" v-if="isEdit">
		<view class="u-flex">
			<view class="u-flex-1 u-p-l-10 u-p-r-10">
				<u-button :loading="btnLoading" @click="submit" type="primary" shape="circle"
					class="btn-block">提交</u-button>
			</view>
		</view>
	</view>
</template>


<script setup>
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy
	const {
		nav,
		navLogin,
		modal,
		toastNavBack
	} = proxy.$util;
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const props = defineProps({
		sid: {
			type: [String, Number],
			default: '',
		},
		edit:{
			type: [String, Number],
			default: '',
		}
	})
	const isEdit = computed(()=>{
		return !!props.edit
	})
	const userInfo = computed(() => store.state.$userInfo)
	const isLogin = computed(() => {
		return store.getters.get_isLogin
	})
	const formData = reactive({
		sid: props.sid
	})
	const formEvaluate = reactive([])
	const loading = ref(false);
	const btnLoading = ref(false);
	const submit = () => {
		uni.showLoading({
			title: '加载中'
		});
		btnLoading.value = true;
		let _data = JSON.parse(JSON.stringify(formData));
		_data.value = [];
		formEvaluate.forEach(v=>{
			let item = JSON.parse(JSON.stringify(v));
			item.images = item.images.map((url,index)=>{
				return {
					imagePath:url,
					status:0,
					viewSort:index+1
				}
			})
			_data.value.push(item);
		})
		proxy.$u.api.editEvaluateOrder(_data).then(res => {
			let {
				code,
				msg,
				data
			} = res;
			btnLoading.value = false
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			uni.$emit('order_update')
			modal({
				content: msg,
				showCancel: false
			}).then(v => {
				uni.navigateBack();
			})
		}).catch(e => {
			btnLoading.value = false
		})
	}
	const detail = reactive({})
	const getData = () => {
		if (!props.sid) {
			return;
		}
		uni.showLoading({
			title: '加载中'
		});	
		formEvaluate.splice(0, formEvaluate.length);
		if(isEdit.value){
			proxy.$u.api.getOrderDetail(props.sid).then(res => {
				// console.log(res);
				let {
					code,
					msg,
					data
				} = res;
				if (code != 200) {
					uni.$u.toast(msg || '错误');
					return;
				}
				for (let key in res.data) {
					detail[key] = data[key]
				}
				if (data.productList && data.productList.length > 0) {
					data.productList.forEach(v => {
						formEvaluate.push({
							content: '',
							productSid: v.productId,
							images: [],
							starLevel: 5,
							status: 0
						})
					})
				}
			})
		}else{
			proxy.$u.api.getOrderEvaluate(props.sid).then(res => {
				// console.log(res);
				let {
					code,
					msg,
					data
				} = res;
				if (code != 200) {
					uni.$u.toast(msg || '错误');
					return;
				}
				if(data && data.length == 0){
					toastNavBack('没有评论。')
					return;
				}
				detail.productList = data;
				data.forEach(v => {
					let images = [];
					if(v.images && v.images.length > 0){
						images = v.images.map(d=>d.imagePath);
					}
					formEvaluate.push({
						content: v.content,
						productSid: v.productId,
						images: images,
						starLevel: v.starLevel,
						status: 0
					})
				})
			})
		}
	}


	onReady(() => {

	})
	onLoad((d) => {
		getData();

	})
	onShow(() => {


	})
</script>

<style lang="scss" scoped>
	.fixed-bottom {
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 28rpx 0rpx rgba(202, 206, 208, 0.3);
	}
</style>